<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="js/three.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Shaders -->
    <script type="x-shader/x-vertex" id="vertexshader">
		// switch on high precision floats
		#ifdef GL_ES
		precision highp float;
		#endif

		void main()
		{
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
		}
    </script>
    <script type="x-shader/x-fragment" id="fragmentshader">
		#ifdef GL_ES
		precision highp float;
		#endif

		void main()
		{
			gl_FragColor 	= vec4(1.0,0.0,1.0,1.0);
		}
    </script>
    <!-- End Shaders -->

    <script type="text/javascript">
        // set the scene size
        var WIDTH = 400,
                HEIGHT = 300;

        // set some camera attributes
        var VIEW_ANGLE = 45,
                ASPECT = WIDTH / HEIGHT,
                NEAR = 0.1,
                FAR = 10000;

        // get the DOM element to attach to
        // - assume we've got jQuery to hand
        var $container = $('#container');

        // create a WebGL renderer, camera
        // and a scene
        var renderer = new THREE.WebGLRenderer();
        var camera = new THREE.Camera(VIEW_ANGLE,
                ASPECT,
                NEAR,
                FAR);
        var scene = new THREE.Scene();

        // the camera starts at 0,0,0 so pull it back
        camera.position.z = 300;

        // start the renderer
        renderer.setSize(WIDTH, HEIGHT);

        // attach the render-supplied DOM element
        $container.append(renderer.domElement);

        // create the sphere's material
        var shaderMaterial = new THREE.ShaderMaterial({
            vertexShader: $('#vertexshader').text(),
            fragmentShader: $('#fragmentshader').text()
        });

        // set up the sphere vars
        var radius = 50, segments = 16, rings = 16;

        // create a new mesh with sphere geometry -
        // we will cover the sphereMaterial next!
        var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(radius, segments, rings),
                shaderMaterial);

        // add the sphere to the scene
        scene.add(sphere);

        // draw!
        renderer.render(scene, camera);

    </script>
</head>
<body>

</body>
</html>